<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useGetProductBrandPage, useUpdateProductBrandInfo } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'

import Edit from './edit.vue'

const initialState = {
    brandName: '',
    isOpen: '',
}
const initialTablePage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const state = ref({ ...initialState })

const columns = [
    {
        colProps: {
            span: 8,
        },
        label: '状态',
        options: [
            {
                label: '已停用',
                value: 0,
            },
            {
                label: '已启用',
                value: 1,
            },
        ],
        prop: 'isOpen',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '品牌名称',
        prop: 'brandName',
    },

]

const id = ref('')
const visible = ref(false)

const formType = ref<'edit' | 'view'>('view')

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'id', title: '品牌ID' },
        { field: 'brandName', slots: { default: 'brandName' }, title: '品牌名称' },
        { field: 'brandLogo', slots: { default: 'brandLogo' }, title: '品牌Logo' },
        { field: 'enterpriseName', title: '申请公司' },
        { field: 'createTime', title: '提交时间' },
        { field: 'isOpen', slots: { default: 'isOpen' }, title: '状态' },
        { slots: { default: 'operate' }, title: '操作' },
    ],
    showOverflow: false,

})
const tablePage = ref({ ...initialTablePage })
const params = computed(() => {
    return {
        brandName: state.value.brandName,
        isOpen: state.value.isOpen,
        page: tablePage.value.currentPage,
        size: tablePage.value.pageSize,
    }
})

const { data, isLoading } = useGetProductBrandPage(params)

const { isPending, mutate } = useUpdateProductBrandInfo()

const loading = computed(() => isLoading.value || isPending.value)

watchEffect(() => {
    if (data) {
        tablePage.value.total = data.value?.total
    }
})

function handleSubmit(values: any) {
    state.value = {
        ...values,
    }
}
function reset() {
    state.value = initialState
    tablePage.value = initialTablePage
}
function changeIsOpen(row: any) {
    const params = {
        id: row.id,
        isOpen: row.isOpen === 0 ? 1 : 0,
    }
    mutate(params, {
        onSuccess: () => {
            ElMessage.success('修改成功')
        },
    })
}

function showEdit(row: any) {
    formType.value = 'edit'
    visible.value = true
    id.value = row.id
}

function showView(row: any) {
    formType.value = 'view'
    visible.value = true
    id.value = row.id
}
</script>

<template>
    <SearchForm v-bind="state"
                :columns="columns"
                submit-text="查询"
                class="mb-20"
                @submit="handleSubmit"
                @reset="reset"
    />

    <SearchTable v-bind="gridOptions"
                 v-model:pager="tablePage"
                 :loading="loading"
                 :data="data?.records"
    >
        <template #brandName="{ row }">
            <span class="text-#da0004 cursor-pointer"
                  @click="showView(row)"
            >
                {{ row.brandName }}
            </span>
        </template>

        <template #brandLogo="{ row }">
            <div class="p-10">
                <el-image v-if="row.brandLogo"
                          style="width: 100px; height: 50px"
                          :src="row?.brandLogo"
                          fit="cover"
                          :preview-src-list="[row?.brandLogo]"
                />
            </div>
        </template>

        <template #isOpen="{ row }">
            <vxe-switch :model-value="row.isOpen === 1"
                        @change="changeIsOpen(row)"
            />
        </template>

        <template #operate="{ row }">
            <div class="flex gap-15 w-full justify-center">
                <span class="cursor-pointer"
                      @click="showView(row)"
                >
                    查看
                </span>

                <span class="cursor-pointer"
                      @click="showEdit(row)"
                >
                    编辑
                </span>
            </div>
        </template>
    </SearchTable>

    <Edit :key="id"
          v-model:visible="visible"
          v-model:id="id"
          v-model:formType="formType"
    />
</template>
